<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档翻译系统 - 支持PDF和图片翻译</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
    
    <!-- 配置Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-soft {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .text-balance {
                text-wrap: balance;
            }
            .image-container {
                position: relative;
                overflow: hidden;
            }
            .image-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            .image-container:hover .image-overlay {
                opacity: 1;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-book text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">文档翻译系统</h1>
            </div>
            <p class="hidden md:block text-sm text-gray-600 italic">"打破语言障碍，高效获取知识"</p>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-custom">
                    <i class="fa fa-moon-o text-gray-600"></i>
                </button>
                <button id="help-button" class="p-2 rounded-full hover:bg-gray-100 transition-custom">
                    <i class="fa fa-question-circle text-gray-600"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 上传区域 -->
        <section class="mb-12">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- PDF上传 -->
                <div class="bg-white rounded-xl shadow-soft p-6">
                    <h2 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fa fa-file-pdf-o text-red-600 mr-2"></i>上传并翻译PDF文件
                    </h2>
                    
                    <form id="pdf-upload-form" class="space-y-4">
                        <div id="pdf-dropzone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-custom bg-neutral">
                            <i class="fa fa-file-pdf-o text-5xl text-gray-400 mb-4"></i>
                            <p class="text-lg text-gray-600 mb-2">拖拽PDF文件到此处，或点击选择文件</p>
                            <p class="text-sm text-gray-500">支持的格式：PDF (最大100MB)</p>
                            <input type="file" id="pdf-file-input" class="hidden" accept=".pdf" multiple>
                            <button type="button" id="pdf-browse-button" class="mt-4 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                                <i class="fa fa-folder-open mr-2"></i>选择文件
                            </button>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <select id="pdf-translation-service" name="service_provider" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                <option value="doubao">豆包翻译</option>
                                <option value="openai">OpenAI</option>
                                <option value="claude">Claude</option>
                                <option value="gemini">Gemini</option>
                                <option value="deepseek">DeepSeek</option>
                                <option value="qwen">Qwen</option>
                            </select>
                            
                            <button type="submit" id="pdf-upload-submit" class="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-custom">
                                <i class="fa fa-upload mr-2"></i>上传并翻译
                            </button>
                        </div>
                    </form>
                    
                    <div id="pdf-upload-progress-container" class="mt-4 hidden">
                        <div class="flex justify-between items-center mb-2">
                            <span id="pdf-upload-filename" class="text-sm font-medium"></span>
                            <span id="pdf-upload-percentage" class="text-sm text-gray-500"></span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="pdf-upload-progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 图片上传 -->
                <div class="bg-white rounded-xl shadow-soft p-6">
                    <h2 class="text-2xl font-bold mb-4 flex items-center">
                        <i class="fa fa-image text-blue-600 mr-2"></i>上传并翻译图片文件
                    </h2>
                    
                    <form id="image-upload-form" class="space-y-4">
                        <div id="image-dropzone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-custom bg-neutral">
                            <i class="fa fa-image text-5xl text-gray-400 mb-4"></i>
                            <p class="text-lg text-gray-600 mb-2">拖拽图片到此处，或点击选择文件</p>
                            <p class="text-sm text-gray-500">支持的格式：JPG, PNG, GIF, BMP (最大50MB)</p>
                            <input type="file" id="image-file-input" class="hidden" accept="image/*" multiple>
                            <button type="button" id="image-browse-button" class="mt-4 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                                <i class="fa fa-folder-open mr-2"></i>选择文件
                            </button>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <select id="image-translation-service" name="service_provider" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                                <option value="doubao">豆包翻译</option>
                                <option value="openai">OpenAI</option>
                                <option value="claude">Claude</option>
                                <option value="gemini">Gemini</option>
                                <option value="deepseek">DeepSeek</option>
                                <option value="qwen">Qwen</option>
                            </select>
                            
                            <button type="submit" id="image-upload-submit" class="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-custom">
                                <i class="fa fa-upload mr-2"></i>上传并翻译
                            </button>
                        </div>
                    </form>
                    
                    <div id="image-upload-progress-container" class="mt-4 hidden">
                        <div class="flex justify-between items-center mb-2">
                            <span id="image-upload-filename" class="text-sm font-medium"></span>
                            <span id="image-upload-percentage" class="text-sm text-gray-500"></span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="image-upload-progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- API密钥输入 -->
            <div class="bg-white rounded-xl shadow-soft p-6 mb-6">
                <h2 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-key text-primary mr-2"></i>API密钥设置
                </h2>
                
                <div class="mt-4">
                    <label for="api-key" class="block text-sm font-medium text-gray-700 mb-1">API密钥</label>
                    <input type="text" id="api-key" name="api_key" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" placeholder="输入您的API密钥 (如果需要)">
                    <p class="text-xs text-gray-500 mt-1">某些翻译服务需要API密钥才能使用</p>
                </div>
            </div>
        </section>
        
        <!-- 文件列表区域 -->
        <section class="mb-12">
            <div class="bg-white rounded-xl shadow-soft p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold flex items-center">
                        <i class="fa fa-list text-primary mr-2"></i>文件列表
                    </h2>
                    <div class="flex space-x-2">
                        <div class="relative">
                            <input type="text" id="search-files" placeholder="搜索文件..." class="pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <select id="filter-status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            <option value="all">所有状态</option>
                            <option value="uploaded">已上传</option>
                            <option value="processing">处理中</option>
                            <option value="completed">已完成</option>
                            <option value="failed">失败</option>
                        </select>
                        <select id="filter-type" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom">
                            <option value="all">所有类型</option>
                            <option value="pdf">PDF文件</option>
                            <option value="image">图片文件</option>
                        </select>
                    </div>
                </div>
                
                <div id="no-files-message" class="py-12 text-center hidden">
                    <i class="fa fa-file-o text-4xl text-gray-300 mb-4"></i>
                    <p class="text-lg text-gray-500">暂无上传的文件</p>
                    <p class="text-sm text-gray-400 mt-2">请上传PDF或图片文件开始翻译</p>
                </div>
                
                <div id="files-container" class="space-y-4">
                    <!-- 文件项将通过JavaScript动态添加 -->
                </div>
            </div>
        </section>
        
        <!-- 预览区域 -->
        <section id="preview-section" class="mb-12 hidden">
            <div class="bg-white rounded-xl shadow-soft p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold flex items-center">
                        <i class="fa fa-eye text-primary mr-2"></i><span id="preview-filename">文件预览</span>
                    </h2>
                    <div class="flex space-x-4">
                        <button id="close-preview" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-custom">
                            <i class="fa fa-times mr-1"></i>关闭
                        </button>
                    </div>
                </div>
                
                <!-- 预览模式切换 -->
                <div class="mb-6 bg-gray-50 rounded-lg p-3 inline-flex">
                    <button id="mode-dual" class="preview-mode-btn px-4 py-2 rounded-lg bg-primary text-white mr-2">
                        <i class="fa fa-columns mr-1"></i>双栏对照
                    </button>
                    <button id="mode-single" class="preview-mode-btn px-4 py-2 rounded-lg hover:bg-gray-200 mr-2">
                        <i class="fa fa-file-text-o mr-1"></i>单栏翻译
                    </button>
                    <button id="mode-overlay" class="preview-mode-btn px-4 py-2 rounded-lg hover:bg-gray-200">
                        <i class="fa fa-image mr-1"></i>原图叠加
                    </button>
                </div>
                
                <!-- 原始内容预览 -->
                <div id="original-preview" class="mb-6">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fa fa-file-o text-gray-600 mr-2"></i>原始内容
                    </h3>
                    <div class="border border-gray-200 rounded-lg overflow-hidden bg-gray-50">
                        <div id="original-content" class="min-h-[500px] flex items-center justify-center">
                            <div class="text-center p-8">
                                <i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
                                <p class="text-gray-500">加载内容中...</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 翻译内容预览 -->
                <div id="translation-preview">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fa fa-language text-primary mr-2"></i>翻译内容
                    </h3>
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div id="translation-content" class="p-6 min-h-[300px]">
                            <div class="text-center p-8">
                                <i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
                                <p class="text-gray-500">加载翻译内容中...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4 flex items-center">
                        <i class="fa fa-book text-primary mr-2"></i>文档翻译系统
                    </h3>
                    <p class="text-gray-400">打破语言障碍，高效获取知识</p>
                    <div class="mt-4 flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-custom">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">API文档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-custom">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-envelope text-primary mt-1 mr-2"></i>
                            <span class="text-gray-400">support@docstranslator.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone text-primary mt-1 mr-2"></i>
                            <span class="text-gray-400">+86 123 4567 8901</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-2"></i>
                            <span class="text-gray-400">北京市海淀区科技园区</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-500 text-sm">
                <p>© 2023 文档翻译系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 翻译进度模态框 -->
    <div id="translation-progress-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg p-8 max-w-md w-full mx-4">
            <div class="text-center mb-6">
                <div class="inline-block p-3 rounded-full bg-primary/10 mb-4">
                    <i class="fa fa-refresh text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold">正在处理</h3>
                <p class="text-gray-500" id="translation-filename">filename.pdf</p>
            </div>
            
            <div class="mb-6">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium">处理进度</span>
                    <span class="text-sm font-medium" id="translation-percentage">0%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div id="translation-progress-bar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                </div>
            </div>
            
            <div class="flex justify-between">
                <button id="cancel-translation" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-custom">
                    取消
                </button>
                <button id="close-progress-modal" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom">
                    后台进行
                </button>
            </div>
        </div>
    </div>

    <!-- 脚本 -->
    <script>
        // 全局变量
        let selectedFileId = null;
        let selectedFileType = null;
        let previewMode = 'dual'; // dual, single, overlay
        let isShowingOverlay = false;
        
        // DOM元素
        const pdfUploadForm = document.getElementById('pdf-upload-form');
        const pdfDropzone = document.getElementById('pdf-dropzone');
        const pdfFileInput = document.getElementById('pdf-file-input');
        const pdfBrowseButton = document.getElementById('pdf-browse-button');
        const pdfUploadSubmit = document.getElementById('pdf-upload-submit');
        const pdfUploadProgressContainer = document.getElementById('pdf-upload-progress-container');
        const pdfUploadProgressBar = document.getElementById('pdf-upload-progress-bar');
        const pdfUploadFilename = document.getElementById('pdf-upload-filename');
        const pdfUploadPercentage = document.getElementById('pdf-upload-percentage');
        
        const imageUploadForm = document.getElementById('image-upload-form');
        const imageDropzone = document.getElementById('image-dropzone');
        const imageFileInput = document.getElementById('image-file-input');
        const imageBrowseButton = document.getElementById('image-browse-button');
        const imageUploadSubmit = document.getElementById('image-upload-submit');
        const imageUploadProgressContainer = document.getElementById('image-upload-progress-container');
        const imageUploadProgressBar = document.getElementById('image-upload-progress-bar');
        const imageUploadFilename = document.getElementById('image-upload-filename');
        const imageUploadPercentage = document.getElementById('image-upload-percentage');
        
        const filesContainer = document.getElementById('files-container');
        const noFilesMessage = document.getElementById('no-files-message');
        const searchFiles = document.getElementById('search-files');
        const filterStatus = document.getElementById('filter-status');
        const filterType = document.getElementById('filter-type');
        
        const translationProgressModal = document.getElementById('translation-progress-modal');
        const translationProgressBar = document.getElementById('translation-progress-bar');
        const translationPercentage = document.getElementById('translation-percentage');
        const translationFilename = document.getElementById('translation-filename');
        const closeProgressModal = document.getElementById('close-progress-modal');
        const cancelTranslation = document.getElementById('cancel-translation');
        
        const previewSection = document.getElementById('preview-section');
        const previewFilename = document.getElementById('preview-filename');
        const closePreview = document.getElementById('close-preview');
        const originalContent = document.getElementById('original-content');
        const translationContent = document.getElementById('translation-content');
        
        const modeDualBtn = document.getElementById('mode-dual');
        const modeSingleBtn = document.getElementById('mode-single');
        const modeOverlayBtn = document.getElementById('mode-overlay');
        
        // 初始化事件监听器
        function initEventListeners() {
            // PDF上传区域事件
            pdfDropzone.addEventListener('dragover', handleDragOver);
            pdfDropzone.addEventListener('dragleave', handleDragLeave);
            pdfDropzone.addEventListener('drop', handlePdfDrop);
            pdfBrowseButton.addEventListener('click', () => pdfFileInput.click());
            pdfFileInput.addEventListener('change', handlePdfFileSelect);
            pdfUploadForm.addEventListener('submit', handlePdfUpload);
            
            // 图片上传区域事件
            imageDropzone.addEventListener('dragover', handleDragOver);
            imageDropzone.addEventListener('dragleave', handleDragLeave);
            imageDropzone.addEventListener('drop', handleImageDrop);
            imageBrowseButton.addEventListener('click', () => imageFileInput.click());
            imageFileInput.addEventListener('change', handleImageFileSelect);
            imageUploadForm.addEventListener('submit', handleImageUpload);
            
            // 搜索和过滤事件
            searchFiles.addEventListener('input', filterFiles);
            filterStatus.addEventListener('change', filterFiles);
            filterType.addEventListener('change', filterFiles);
            
            // 预览模式切换
            modeDualBtn.addEventListener('click', () => switchPreviewMode('dual'));
            modeSingleBtn.addEventListener('click', () => switchPreviewMode('single'));
            modeOverlayBtn.addEventListener('click', () => switchPreviewMode('overlay'));
            
            // 关闭预览
            closePreview.addEventListener('click', () => {
                previewSection.classList.add('hidden');
            });
            
            // 关闭进度模态框
            closeProgressModal.addEventListener('click', () => {
                translationProgressModal.classList.add('hidden');
            });
            
            // 取消翻译
            cancelTranslation.addEventListener('click', () => {
                // 这里应该发送取消请求到后端
                translationProgressModal.classList.add('hidden');
            });
        }
        
        // 处理拖拽事件
        function handleDragOver(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.add('border-primary');
            this.classList.add('bg-primary/5');
        }
        
        function handleDragLeave(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.remove('border-primary');
            this.classList.remove('bg-primary/5');
        }
        
        // 处理PDF文件上传
        function handlePdfDrop(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.remove('border-primary');
            this.classList.remove('bg-primary/5');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                pdfFileInput.files = files;
            }
        }
        
        function handlePdfFileSelect(e) {
            const files = e.target.files;
            if (files.length > 0) {
                pdfDropzone.classList.remove('border-gray-300');
                pdfDropzone.classList.add('border-green-500');
                
                const fileNames = Array.from(files).map(file => file.name).join(', ');
                pdfDropzone.innerHTML = `
                    <i class="fa fa-file-pdf-o text-5xl text-green-500 mb-4"></i>
                    <p class="text-lg text-gray-600 mb-2">已选择 ${files.length} 个文件</p>
                    <p class="text-sm text-gray-500 truncate">${fileNames}</p>
                    <button type="button" id="pdf-browse-button" class="mt-4 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                        <i class="fa fa-folder-open mr-2"></i>选择其他文件
                    </button>
                `;
                
                // 重新绑定按钮事件
                document.getElementById('pdf-browse-button').addEventListener('click', () => pdfFileInput.click());
            }
        }
        
        // 处理图片文件上传
        function handleImageDrop(e) {
            e.preventDefault();
            e.stopPropagation();
            this.classList.remove('border-primary');
            this.classList.remove('bg-primary/5');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                imageFileInput.files = files;
            }
        }
        
        function handleImageFileSelect(e) {
            const files = e.target.files;
            if (files.length > 0) {
                imageDropzone.classList.remove('border-gray-300');
                imageDropzone.classList.add('border-green-500');
                
                const fileNames = Array.from(files).map(file => file.name).join(', ');
                imageDropzone.innerHTML = `
                    <i class="fa fa-image text-5xl text-green-500 mb-4"></i>
                    <p class="text-lg text-gray-600 mb-2">已选择 ${files.length} 个文件</p>
                    <p class="text-sm text-gray-500 truncate">${fileNames}</p>
                    <button type="button" id="image-browse-button" class="mt-4 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                        <i class="fa fa-folder-open mr-2"></i>选择其他文件
                    </button>
                `;
                
                // 重新绑定按钮事件
                document.getElementById('image-browse-button').addEventListener('click', () => imageFileInput.click());
            }
        }
        
        // 处理PDF上传
        function handlePdfUpload(e) {
            e.preventDefault();
            
            const files = pdfFileInput.files;
            if (files.length === 0) {
                alert('请选择PDF文件');
                return;
            }
            
            const serviceProvider = document.getElementById('pdf-translation-service').value;
            const apiKey = document.getElementById('api-key').value;
            
            uploadFiles(files, 'pdf', serviceProvider, apiKey);
        }
        
        // 处理图片上传
        function handleImageUpload(e) {
            e.preventDefault();
            
            const files = imageFileInput.files;
            if (files.length === 0) {
                alert('请选择图片文件');
                return;
            }
            
            const serviceProvider = document.getElementById('image-translation-service').value;
            const apiKey = document.getElementById('api-key').value;
            
            uploadFiles(files, 'image', serviceProvider, apiKey);
        }
        
        // 上传文件
        function uploadFiles(files, fileType, serviceProvider, apiKey) {
            // 显示进度条容器
            if (fileType === 'pdf') {
                pdfUploadProgressContainer.classList.remove('hidden');
                pdfUploadProgressBar.style.width = '0%';
                pdfUploadPercentage.textContent = '0%';
            } else {
                imageUploadProgressContainer.classList.remove('hidden');
                imageUploadProgressBar.style.width = '0%';
                imageUploadPercentage.textContent = '0%';
            }
            
            Array.from(files).forEach(file => {
                // 检查文件类型
                const fileExt = file.name.split('.').pop().toLowerCase();
                if (fileType === 'pdf' && fileExt !== 'pdf') {
                    alert('请选择PDF文件');
                    return;
                }
                
                if (fileType === 'image' && !['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(fileExt)) {
                    alert('请选择图片文件 (JPG, PNG, GIF, BMP)');
                    return;
                }
                
                const formData = new FormData();
                formData.append('file', file);
                formData.append('service_provider', serviceProvider);
                formData.append('api_key', apiKey);
                
                // 更新进度条显示
                if (fileType === 'pdf') {
                    pdfUploadFilename.textContent = file.name;
                } else {
                    imageUploadFilename.textContent = file.name;
                }
                
                // 发送文件到服务器
                fetch('/upload_and_translate', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        // 显示翻译进度模态框
                        translationProgressModal.classList.remove('hidden');
                        translationFilename.textContent = file.name;
                        
                        // 定期检查翻译进度
                        checkTranslationStatus(data.id);
                        
                        // 重置上传区域
                        if (fileType === 'pdf') {
                            pdfFileInput.value = '';
                            pdfDropzone.innerHTML = `
                                <i class="fa fa-file-pdf-o text-5xl text-gray-400 mb-4"></i>
                                <p class="text-lg text-gray-600 mb-2">拖拽PDF文件到此处，或点击选择文件</p>
                                <p class="text-sm text-gray-500">支持的格式：PDF (最大100MB)</p>
                                <input type="file" id="pdf-file-input" class="hidden" accept=".pdf" multiple>
                                <button type="button" id="pdf-browse-button" class="mt-4 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                                    <i class="fa fa-folder-open mr-2"></i>选择文件
                                </button>
                            `;
                            pdfDropzone.classList.remove('border-green-500');
                            pdfDropzone.classList.add('border-gray-300');
                            
                            // 重新绑定按钮事件
                            document.getElementById('pdf-browse-button').addEventListener('click', () => pdfFileInput.click());
                        } else {
                            imageFileInput.value = '';
                            imageDropzone.innerHTML = `
                                <i class="fa fa-image text-5xl text-gray-400 mb-4"></i>
                                <p class="text-lg text-gray-600 mb-2">拖拽图片到此处，或点击选择文件</p>
                                <p class="text-sm text-gray-500">支持的格式：JPG, PNG, GIF, BMP (最大50MB)</p>
                                <input type="file" id="image-file-input" class="hidden" accept="image/*" multiple>
                                <button type="button" id="image-browse-button" class="mt-4 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                                    <i class="fa fa-folder-open mr-2"></i>选择文件
                                </button>
                            `;
                            imageDropzone.classList.remove('border-green-500');
                            imageDropzone.classList.add('border-gray-300');
                            
                            // 重新绑定按钮事件
                            document.getElementById('image-browse-button').addEventListener('click', () => imageFileInput.click());
                        }
                    } else {
                        alert(data.error || '上传失败');
                        
                        // 隐藏进度条
                        if (fileType === 'pdf') {
                            pdfUploadProgressContainer.classList.add('hidden');
                        } else {
                            imageUploadProgressContainer.classList.add('hidden');
                        }
                    }
                })
                .catch(error => {
                    console.error('Error uploading file:', error);
                    alert('上传失败');
                    
                    // 隐藏进度条
                    if (fileType === 'pdf') {
                        pdfUploadProgressContainer.classList.add('hidden');
                    } else {
                        imageUploadProgressContainer.classList.add('hidden');
                    }
                });
            });
        }
        
        // 检查翻译状态
        function checkTranslationStatus(fileId) {
            fetch(`/get_translation_status/${fileId}`)
                .then(response => response.json())
                .then(data => {
                    // 更新进度条
                    translationPercentage.textContent = `${data.progress}%`;
                    translationProgressBar.style.width = `${data.progress}%`;
                    
                    if (data.status === 'processing') {
                        // 继续检查
                        setTimeout(() => checkTranslationStatus(fileId), 1000);
                    } else {
                        // 翻译完成或失败
                        translationProgressModal.classList.add('hidden');
                        loadFiles();  // 刷新文件列表
                        
                        if (data.status === 'completed') {
                            alert('翻译完成');
                        } else if (data.status === 'failed') {
                            alert('翻译失败');
                        }
                    }
                })
            .catch(error => {
                console.error('Error checking translation status:', error);
                translationProgressModal.classList.add('hidden');
            });
        }
        
        // 加载文件列表
        function loadFiles() {
            fetch('/api/files')
                .then(response => response.json())
                .then(files => {
                    filesContainer.innerHTML = '';
                    
                    if (files.length === 0) {
                        noFilesMessage.classList.remove('hidden');
                        return;
                    }
                    
                    noFilesMessage.classList.add('hidden');
                    
                    // 按上传时间排序（最新的在前）
                    files.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
                    
                    files.forEach(file => {
                        const fileItem = createFileItem(file);
                        filesContainer.appendChild(fileItem);
                    });
                    
                    // 应用过滤
                    filterFiles();
                })
                .catch(error => {
                    console.error('Error loading files:', error);
                    alert('加载文件列表失败');
                    filesContainer.innerHTML = `
                        <div class="bg-red-50 border border-red-200 rounded-lg p-4 my-4">
                            <h3 class="text-red-700 font-semibold mb-2">加载文件列表失败</h3>
                            <p class="text-red-600">${error.message}</p>
                            <p class="text-sm text-red-500 mt-2">请检查控制台获取更多详细信息</p>
                        </div>
                    `;
                });
        }
        
        // 创建文件项
        function createFileItem(file) {
            const item = document.createElement('div');
            item.className = 'p-4 border border-gray-200 rounded-xl mb-4 shadow-sm hover:shadow-md transition-all duration-300';
            item.setAttribute('data-file-id', file.id);
            item.setAttribute('data-file-type', file.file_type);
            item.setAttribute('data-status', file.status);
            
            // 格式化文件大小
            const formatFileSize = (bytes) => {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            };
            
            // 确定文件图标和颜色
            let fileIcon = '';
            let iconColor = '';
            
            if (file.file_type === 'pdf') {
                fileIcon = 'fa-file-pdf-o';
                iconColor = 'text-red-600';
            } else if (file.file_type === 'image') {
                fileIcon = 'fa-file-image-o';
                iconColor = 'text-blue-600';
            }
            
            // 确定状态徽章
            let statusBadge = '';
            if (file.status === 'uploaded') {
                statusBadge = '<span class="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">已上传</span>';
            } else if (file.status === 'processing') {
                statusBadge = `
                    <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-xs rounded-full flex items-center">
                        <i class="fa fa-spinner fa-spin mr-1"></i>处理中 ${file.progress}%
                    </span>
                `;
            } else if (file.status === 'completed') {
                statusBadge = '<span class="px-2 py-0.5 bg-green-100 text-green-800 text-xs rounded-full">已完成</span>';
            } else if (file.status === 'failed') {
                statusBadge = '<span class="px-2 py-0.5 bg-red-100 text-red-800 text-xs rounded-full">处理失败</span>';
            }
            
            // 确定文件类型标签
            let fileTypeLabel = '';
            if (file.file_type === 'pdf') {
                fileTypeLabel = '<span class="px-2 py-0.5 bg-red-100 text-red-800 text-xs rounded-full">PDF文件</span>';
            } else if (file.file_type === 'image') {
                fileTypeLabel = '<span class="px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded-full">图片文件</span>';
            }
            
            // 构建文件项HTML
            item.innerHTML = `
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div class="mb-3 md:mb-0 flex items-start">
                        <div class="w-10 h-10 rounded bg-gray-100 flex items-center justify-center mr-3">
                            <i class="fa ${fileIcon} ${iconColor}"></i>
                        </div>
                        <div>
                            <h3 class="font-medium truncate max-w-md">${file.filename}</h3>
                            <div class="flex flex-wrap items-center mt-1 gap-2">
                                ${statusBadge}
                                ${fileTypeLabel}
                                <span class="text-xs text-gray-500">
                                    ${formatFileSize(Math.floor(Math.random() * 10000000))}
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-2">
                        ${file.status === 'completed' ? `
                            <button class="preview-btn px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-custom text-sm">
                                <i class="fa fa-eye mr-1"></i>预览
                            </button>
                        ` : ''}
                        
                        <button class="download-btn px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-custom text-sm">
                            <i class="fa fa-download mr-1"></i>下载
                        </button>
                        
                        <button class="delete-file-btn px-3 py-1.5 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition-custom text-sm">
                            <i class="fa fa-trash mr-1"></i>删除
                        </button>
                    </div>
                </div>
                
                ${file.status === 'processing' ? `
                    <div class="mt-3">
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: ${file.progress}%"></div>
                        </div>
                    </div>
                ` : ''}
                
                <div class="mt-3 flex justify-between items-center text-xs text-gray-500">
                    <span>上传时间: ${file.created_at}</span>
                    <span>${file.completed_at ? '完成时间: ' + file.completed_at : ''}</span>
                </div>
            `;
            
            // 添加预览按钮事件
            const previewBtn = item.querySelector('.preview-btn');
            if (previewBtn) {
                previewBtn.addEventListener('click', () => {
                    selectedFileId = file.id;
                    selectedFileType = file.file_type;
                    loadPreview(file.id, file.file_type);
                    previewSection.classList.remove('hidden');
                });
            }
            
            // 添加下载按钮事件
            const downloadBtn = item.querySelector('.download-btn');
            downloadBtn.addEventListener('click', () => {
                if (file.status === 'completed') {
                    // 下载翻译结果
                    window.location.href = `/download_translated/${file.id}`;
                } else {
                    // 下载原始文件
                    window.location.href = `/download_original/${file.id}`;
                }
            });
            
            // 添加删除按钮事件
            const deleteBtn = item.querySelector('.delete-file-btn');
            deleteBtn.addEventListener('click', () => {
                if (confirm('确定要删除这个文件吗？此操作不可撤销。')) {
                    deleteFile(file.id);
                }
            });
            
            return item;
        }
        
        // 删除文件
        function deleteFile(fileId) {
            fetch(`/api/delete/${fileId}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    alert(data.message);
                    loadFiles();  // 刷新文件列表
                } else {
                    alert(data.error);
                }
            })
            .catch(error => {
                console.error('Error deleting file:', error);
                alert('删除文件失败');
            });
        }
        
        // 加载预览
        function loadPreview(fileId, fileType) {
            // 重置预览区域
            originalContent.innerHTML = `
                <div class="text-center p-8">
                    <i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
                    <p class="text-gray-500">加载内容中...</p>
                </div>
            `;
            
            translationContent.innerHTML = `
                <div class="text-center p-8">
                    <i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
                    <p class="text-gray-500">加载翻译内容中...</p>
                </div>
            `;
            
            previewFilename.textContent = document.querySelector(`[data-file-id="${fileId}"] h3`).textContent;
            
            if (fileType === 'pdf') {
                // 加载PDF预览
                renderPDF(fileId);
            } else if (fileType === 'image') {
                // 加载图片预览
                renderImage(fileId);
            }
            
            // 加载翻译结果
            loadTranslationResult(fileId);
        }
        
        // 渲染PDF预览
        function renderPDF(fileId) {
            originalContent.innerHTML = `
                <div class="text-center p-8">
                    <i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
                    <p class="text-gray-500">加载PDF中...</p>
                </div>
            `;
            
            // 实际应用中应该从服务器获取PDF文件URL
            const pdfUrl = `/download_original/${fileId}`;
            
            // 加载PDF
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
            
            pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
                // 清空容器
                originalContent.innerHTML = '';
                
                // 只渲染第一页作为预览
                pdf.getPage(1).then(page => {
                    const scale = 1.5;
                    const viewport = page.getViewport({ scale: scale });
                    
                    // 创建canvas元素
                    const canvas = document.createElement('canvas');
                    const context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    
                    // 添加到容器
                    originalContent.appendChild(canvas);
                    
                    // 渲染PDF页面
                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    
                    const renderTask = page.render(renderContext);
                    renderTask.promise.then(() => {
                        // 添加页码指示
                        const pageInfo = document.createElement('div');
                        pageInfo.className = 'absolute bottom-0 left-0 right-0 bg-black/50 text-white p-2 text-sm flex justify-between items-center';
                        pageInfo.innerHTML = `
                            <span><i class="fa fa-file-pdf-o mr-1"></i>第 1 页，共 ${pdf.numPages} 页</span>
                        `;
                        originalContent.appendChild(pageInfo);
                    });
                });
            }).catch(error => {
                console.error('Error loading PDF:', error);
                originalContent.innerHTML = `
                    <div class="text-center p-8">
                        <i class="fa fa-exclamation-circle text-red-500 text-3xl mb-4"></i>
                        <p class="text-red-500">加载PDF失败</p>
                        <p class="text-gray-500 mt-2">${error.message}</p>
                    </div>
                `;
            });
        }
        
        // 渲染图片预览
        function renderImage(fileId) {
            originalContent.innerHTML = `
                <div class="text-center p-8">
                    <i class="fa fa-spinner fa-spin text-primary text-3xl mb-4"></i>
                    <p class="text-gray-500">加载图片中...</p>
                </div>
            `;
            
            // 从服务器获取图片URL
            const imageUrl = `/download_original/${fileId}`;
            
            // 创建图片元素
            const img = document.createElement('img');
            img.src = imageUrl;
            img.className = 'max-w-full max-h-[500px] mx-auto object-contain';
            img.alt = '预览图片';
            
            // 清空容器并添加图片
            originalContent.innerHTML = '';
            originalContent.appendChild(img);
        }
        
        // 加载翻译结果
        function loadTranslationResult(fileId) {
            fetch(`/get_translation_result/${fileId}`)
                .then(response => response.json())
                .then(data => {
                    if (data && data.length > 0) {
                        if (selectedFileType === 'pdf') {
                            // 处理PDF翻译结果
                            renderPdfTranslationResult(data);
                        } else if (selectedFileType === 'image') {
                            // 处理图片翻译结果
                            renderImageTranslationResult(data);
                        }
                    } else {
                        translationContent.innerHTML = `
                            <div class="text-center p-8">
                                <i class="fa fa-info-circle text-gray-400 text-3xl mb-4"></i>
                                <p class="text-gray-500">暂无翻译结果</p>
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    console.error('Error loading translation result:', error);
                    translationContent.innerHTML = `
                        <div class="text-center p-8">
                            <i class="fa fa-exclamation-circle text-red-500 text-3xl mb-4"></i>
                            <p class="text-red-500">加载翻译结果失败</p>
                        </div>
                    `;
                });
        }
        
        // 渲染PDF翻译结果
        function renderPdfTranslationResult(data) {
            if (previewMode === 'dual') {
                // 双栏对照模式
                translationContent.innerHTML = `
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-gray-700 mb-2">原文</h4>
                            <div class="bg-gray-50 p-4 rounded-lg min-h-[200px] overflow-auto">
                                ${data.map(item => `
                                    <p class="mb-3">${item.original}</p>
                                `).join('')}
                            </div>
                        </div>
                        <div>
                            <h4 class="font-semibold text-primary mb-2">译文</h4>
                            <div class="bg-gray-50 p-4 rounded-lg min-h-[200px] overflow-auto">
                                ${data.map(item => `
                                    <p class="mb-3">${item.translated}</p>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `;
            } else if (previewMode === 'single') {
                // 单栏翻译模式
                translationContent.innerHTML = `
                    <div>
                        <h4 class="font-semibold text-primary mb-2">译文</h4>
                        <div class="bg-gray-50 p-4 rounded-lg min-h-[400px] overflow-auto">
                            ${data.map(item => `
                                <p class="mb-3">${item.translated}</p>
                            `).join('')}
                        </div>
                    </div>
                `;
            }
        }
        
        // 渲染图片翻译结果
        function renderImageTranslationResult(data) {
            if (previewMode === 'dual') {
                // 双栏对照模式
                translationContent.innerHTML = `
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-gray-700 mb-2">OCR识别文本</h4>
                            <div class="bg-gray-50 p-4 rounded-lg min-h-[200px] overflow-auto">
                                ${data.map(item => `
                                    <p class="mb-3">${item.original}</p>
                                `).join('')}
                            </div>
                        </div>
                        <div>
                            <h4 class="font-semibold text-primary mb-2">翻译结果</h4>
                            <div class="bg-gray-50 p-4 rounded-lg min-h-[200px] overflow-auto">
                                ${data.map(item => `
                                    <p class="mb-3">${item.translated}</p>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `;
            } else if (previewMode === 'single') {
                // 单栏翻译模式
                translationContent.innerHTML = `
                    <div>
                        <h4 class="font-semibold text-primary mb-2">翻译结果</h4>
                        <div class="bg-gray-50 p-4 rounded-lg min-h-[400px] overflow-auto">
                            ${data.map(item => `
                                <p class="mb-3">${item.translated}</p>
                            `).join('')}
                        </div>
                    </div>
                `;
            } else if (previewMode === 'overlay') {
                // 原图叠加模式
                const img = originalContent.querySelector('img');
                if (img) {
                    // 清空翻译内容区域
                    translationContent.innerHTML = '';
                    
                    // 确保图片已加载
                    if (img.complete) {
                        applyTranslationOverlay(img, data);
                    } else {
                        img.onload = () => applyTranslationOverlay(img, data);
                    }
                }
            }
        }
        
        // 应用翻译叠加层
        function applyTranslationOverlay(img, data) {
            // 为原图添加容器，用于定位叠加层
            const imageContainer = document.createElement('div');
            imageContainer.className = 'relative';
            
            // 将原图移入容器
            const parent = img.parentNode;
            parent.replaceChild(imageContainer, img);
            imageContainer.appendChild(img);
            
            // 创建叠加层
            const overlay = document.createElement('div');
            overlay.className = 'absolute inset-0 bg-white/80 p-6 overflow-auto';
            overlay.style.display = isShowingOverlay ? 'block' : 'none';
            
            // 添加翻译文本
            overlay.innerHTML = `
                <h4 class="font-semibold text-primary mb-4">翻译结果 (点击图片切换显示/隐藏)</h4>
                <div class="prose max-w-none">
                    ${data.map(item => `
                        <p class="mb-4">${item.translated}</p>
                    `).join('')}
                </div>
            `;
            
            // 添加叠加层到容器
            imageContainer.appendChild(overlay);
            
            // 点击图片切换叠加层显示状态
            img.addEventListener('click', () => {
                isShowingOverlay = !isShowingOverlay;
                overlay.style.display = isShowingOverlay ? 'block' : 'none';
            });
        }
        
        // 切换预览模式
        function switchPreviewMode(mode) {
            previewMode = mode;
            
            // 更新按钮样式
            [modeDualBtn, modeSingleBtn, modeOverlayBtn].forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('hover:bg-gray-200');
            });
            
            const activeBtn = document.getElementById(`mode-${mode}`);
            activeBtn.classList.add('bg-primary', 'text-white');
            activeBtn.classList.remove('hover:bg-gray-200');
            
            // 重新加载预览
            if (selectedFileId && selectedFileType) {
                loadPreview(selectedFileId, selectedFileType);
            }
        }
        
        // 过滤文件
        function filterFiles() {
            const searchTerm = searchFiles.value.toLowerCase();
            const statusFilter = filterStatus.value;
            const typeFilter = filterType.value;
            
            const fileItems = document.querySelectorAll('[data-file-id]');
            let visibleCount = 0;
            
            fileItems.forEach(item => {
                const filename = item.querySelector('h3').textContent.toLowerCase();
                const status = item.getAttribute('data-status');
                const fileType = item.getAttribute('data-file-type');
                
                const matchesSearch = filename.includes(searchTerm);
                const matchesStatus = statusFilter === 'all' || status === statusFilter;
                const matchesType = typeFilter === 'all' || fileType === typeFilter;
                
                if (matchesSearch && matchesStatus && matchesType) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 检查是否有可见的文件
            if (visibleCount === 0) {
                filesContainer.innerHTML = `
                    <div class="text-center py-12">
                        <i class="fa fa-search text-4xl text-gray-300 mb-4"></i>
                        <p class="text-lg text-gray-500">没有找到匹配的文件</p>
                        <p class="text-sm text-gray-400 mt-2">请尝试不同的搜索词或筛选条件</p>
                    </div>
                `;
            }
        }
        
        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            initEventListeners();
            loadFiles();
            
            // 为主题切换按钮添加事件
            document.getElementById('theme-toggle').addEventListener('click', () => {
                document.body.classList.toggle('dark-mode');
            });
            
            // 为帮助按钮添加事件
            document.getElementById('help-button').addEventListener('click', () => {
                alert('文档翻译系统帮助：\n\n1. 上传PDF或图片文件\n2. 选择翻译服务\n3. 等待翻译完成\n4. 预览或下载翻译结果');
            });
        });
    </script>
</body>
</html>